/**
* input
*{
* type: 'kmlc-form-input',
* label: '姓名',
* key: 'UserName',
* inputType: 'text', [text, number, idcard, digit ,password]
* required: true, //这里只是一个标记，具有验证逻辑需要自己在业务中实现
* disabled:false,
* value: ''
* }
*/
<template>
	<tui-list-cell :hover="false" :arrow="theOptions.readonly?false:true">
		<view class="input_line">
			<view class="input_title">
				<text v-show="theRules&&theRules[0]&&theRules[0].required" class="isrequire">*</text>
				<text>{{label}}</text>
			</view>
			<view class="input_content">
				<input @blur='blurVal' :type="theOptions.type" :placeholder="theOptions.placeholder" v-model="theOptions.defaultValue"
				 :disabled="theOptions.disabled" class="tui-num-input" :style="{color:theOptions.color,fontSize:px(theOptions.size),background:theOptions.bgcolor,height:px(theOptions.height),width:px(theOptions.width)}" />
				<tui-icon @click="clearInput" class="tui-icon-close clear_value" v-show="theOptions.clearable" :style="{fontSize:px(theOptions.iconsize)}"></tui-icon>
			</view>
		</view>

	</tui-list-cell>
</template>

<script>
	import tuiIcon from '../../thor-com/icon/icon.vue'
	export default {
		name: 'kmlc-input',
		props: {
			label: {
				type: String
			},
			emData: {
				type: Object,
				default: () => {
					return {}
				}
			},
			options: {
				type: Object
			},
			rules: {
				type: Array
			}
		},
		components: {
			tuiIcon
		},
		// computed: {
		// 	val() {
		// 		return this.theOptions.value
		// 	}
		// },
		model: {
			prop: "value",
			event: "setVal"
		},
		data() {
			return {
				theOptions: {},
				// inputValue: '',
				theRules: [],
			}
		},

		watch: {
			emData: function(newVal, oldVal) {
				// console.log('重置输入框:')
				this.theOptions = newVal.options; //重置数据
			},
		},

		created() {
			if (this.emData && this.emData.options) {
				if (this.emData.rules) {
					this.theRules = this.emData.rules
				};
				this.theOptions = this.emData.options;
			} else {
				this.theOptions = this.options;
			}
			// this.inputValue = this.theOptions.defaultValue;
		},

		methods: {
			clearInput() {
				return this.theOptions.defaultValue = '';
			},
			blurVal() {
				if (this.theOptions.disabled) {
					return
				}
				this.$emit('onChangeVal', {
					value: this.theOptions.defaultValue
				});
			},
			px(num) {
				return uni.upx2px(num) + "px"
			},
		}
	}
</script>

<style>
	.isrequire{
		color: #d41200;
	}
	
	.input_line {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.input_title {
		min-width: 100upx;
		line-height: 32rpx;
		flex-shrink: 0;
	}

	.input_content {
		width: 100%;
		background: #FFFFFF;
		padding: 12upx 0upx;
		box-sizing: border-box;
		position: relative;
		display: flex;
		align-items: center;
	}

	.tui-num-input {
		font-weight: 400;
		width: 100%;
		padding-left: 12upx;
		padding-right: 35upx;
		border: 1upx solid #D9D9D9;
		box-sizing: border-box;
	}

	.tui-numbox-icon {
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		padding: 10rpx;
	}

	.clear_value {
		position: absolute;
		right: 10upx;
		color: #D9D9D9 !important;
		z-index: 999;
	}
</style>
